<template>
  <view class="yiyujieguo">
    <p class="p1">结果分析</p>
    <p class="p2">本测试及结果由AI得出,仅供参考,不能作为诊断及医疗的依据</p>
    <view class="result" v-if="result">
      <p class="p3">{{ result.scope }}：{{ result.result }}</p>
      <p class="p4">{{ result.suggest }}</p>
      <p class="p5">测评结果概述：</p>
      <p class="p6" v-for="(item, index) in result.outline" :key="index">
        {{ index + 1 }}:{{ item }}
      </p>
      <p class="p7">AI为你推荐以下科室：</p>
      <view
        class="keshi"
        v-for="(item, index) in result.recommend"
        :key="index"
      >
        <view class="left">
          <p class="p8">{{ item.dep_name }}</p>
          <p class="p9">{{ item.hospital }}</p>
        </view>
        <view class="right">
          <button @click="goGua(item.dep_id)">去挂号</button>
        </view>
      </view>
    </view>
    <view class="zaiceyici" v-if="result">
      <button @click="goTest">再次测试</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { api } from "../../api/api";
import type { answerT } from "../../types/type";
const result = ref<answerT>();
onLoad(async (options) => {
  const arr = options.arr.split(",");
  const res: any = await api.premature({ value: arr });
  result.value = res.data[0];
});
const goGua = (id: string) => {
  uni.navigateTo({
    url: "/navPage/doctor/doctor?dep_id=" + id,
  });
};
const goTest = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.yiyujieguo {
  width: 100vw;
  height: 100vh;
  background-color: #d7e8fe;
  padding: 20rpx;
  box-sizing: border-box;
  .p1 {
    font-weight: 600;
    font-size: 35rpx;
  }
  .p2 {
    margin: 20rpx 0;
    line-height: 40rpx;
  }
  .result {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    background-color: #fff;
    .p3 {
      font-weight: 600;
      font-size: 35rpx;
      color: #4073ff;
    }
    .p4 {
      color: #4073ff;
      margin: 20rpx 0;
    }
    .p5,
    .p7 {
      font-weight: 600;
      font-size: 35rpx;
      margin-bottom: 20rpx;
    }
    .p6 {
      margin: 10rpx 0;
    }
    .keshi {
      width: 100%;
      background-color: #f4f8fb;
      border-radius: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      margin: 20rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        .p8 {
          font-weight: 600;
          font-size: 35rpx;
          margin-bottom: 10rpx;
        }
        .p9 {
          color: #ccc;
        }
      }
      .right {
        button {
          background-color: #4073ff;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 70rpx;
        }
      }
    }
  }
}
</style>
